<script setup>
import { nextTick, onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Select } from 'ant-design-vue';

import {getUseInfoAll} from '#/api/largeVisualScreen/smallProgram'

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

const dataValue = ref([
  { label: '登录人数', value: 100 },
  { label: '登录人次', value: 300 },
  { label: '协会数量', value: 400 },
  { label: '发起活动数量', value: 500 },
  { label: '累计点击量', value: 200 },
  { label: '论坛发布量', value: 300 },
]);

getUseInfoAll().then((res)=>{
console.log("使用情况总数据",res);
// dataValue = res;
})


const dataList = ref([
  '华北组织',
  '华东组织',
  '华南组织',
  '华中组织',
  '西南组织',
  '西北组织',
  '东北组织',
  '华北组织2',
  '华东组织2',
  '华南组织2',
  '华中组织2',
  '西南组织2',
  '西北组织2',
  '东北组织2',
  '华北组织3',
  '华东组织3',
  '华南组织3',
  '华中组织3',
  '西南组织3',
  '西北组织3',
  '东北组织3',
  '华北组织4',
  '华东组织4',
  '华南组织4',
  '华中组织4',
  '西南组织4',
]);

// 各二级组织的数据
const option = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 30,
    bottom: 30,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)',
        width: 1,
        type: 'dashed',
      },
    },
  },
  legend: {
    data: [
      '组织1',
      '组织2',
      '组织3',
      '组织4',
      '组织5',
      '组织6',
      '组织7',
      '组织8',
      '组织9',
      '组织10',
      '组织11',
      '组织12',
      '组织13',
      '组织14',
      '组织15',
      '组织16',
      '组织17',
      '组织18',
      '组织19',
      '组织20',
      '组织21',
      '组织22',
      '组织23',
      '组织24',
      '组织25',
      '组织26',
    ],
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
    top: 0,
    icon: 'roundRect',
    itemWidth: 12,
    itemHeight: 6,
    itemGap: 20,
  },
  xAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [5, 0, 0, 0],
    },
    data: dataList.value, // 保留完整数据
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
      interval: 2, // 每隔 3 个显示一个标签（从 0 开始计数）
      margin: 8,
    },
  },
  yAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [],
});

// 切换状态
const flag = ref(true);
// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  nextTick(() => {
    renderEcharts(option.value);
  });

  // console.log("数据是",option.value);
};

// 当前选中的组织
const selectedOrg = ref('登录人数');

onMounted(() => {
  handleOrgChange(selectedOrg.value);
});

// 组织列表数据
const orgList = ref([
  '登录人数',
  '登录人次',
  '协会数量',
  '发起活动数量',
  '累计点击量',
  '论坛发布量',
]);


// 组织选择变化处理
const handleOrgChange = (value) => {
  // 造假数据，每个组织一份
  const fakeDataMap = {
    登录人数: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 1000 + 100),
    ),
    登录人次: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 2000 + 200),
    ),
    协会数量: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 100 + 10),
    ),
    发起活动数量: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 300 + 30),
    ),
    累计点击量: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 5000 + 500),
    ),
    论坛发布量: Array.from({ length: 26 }, (_, i) =>
      Math.floor(Math.random() * 800 + 80),
    ),
  };
  // x轴组织名
  const xData = [
    '华北组织',
    '华东组织',
    '华南组织',
    '华中组织',
    '西南组织',
    '西北组织',
    '东北组织',
    '华北组织2',
    '华东组织2',
    '华南组织2',
    '华中组织2',
    '西南组织2',
    '西北组织2',
    '东北组织2',
    '华北组织3',
    '华东组织3',
    '华南组织3',
    '华中组织3',
    '西南组织3',
    '西北组织3',
    '东北组织3',
    '华北组织4',
    '华东组织4',
    '华南组织4',
    '华中组织4',
    '西南组织4',
  ];
  option.value.xAxis.data = xData;
  option.value.series = [
    {
      name: value,
      type: 'line',
      data: fakeDataMap[value],
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: '#00eaff',
      },
      itemStyle: {
        color: '#00eaff',
        borderColor: '#fff',
        borderWidth: 2,
      },
      areaStyle: {
        color: 'rgba(0,234,255,0.15)',
      },
    },
  ];
  nextTick(() => {
    renderEcharts(option.value);
  });
};
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        {{ flag ? '使用情况(全部)' : '使用情况(各级组织)' }}
      </h3>
      <div class="flex items-center gap-4">
        <Select
          v-if="!flag"
          v-model:value="selectedOrg"
          placeholder="请选择组织"
          style="width: 140px"
          class="custom-select"
          @change="handleOrgChange"
        >
          <Select.Option v-for="org in orgList" :key="org" :value="org">
            {{ org }}
          </Select.Option>
        </Select>
        <div
          @click="handleChange"
          class="toggle-switch"
          :class="{ active: !flag }"
        >
          切换图表
        </div>
      </div>
    </div>
    <div v-show="flag" class="h-full" style="padding: 0 20px">
      <div class="box-bg">
        <div class="grid h-full grid-cols-3 gap-6">
          <div
            v-for="(item, index) in dataValue"
            :key="index"
            class="data-card flex flex-col items-center justify-between"
          >
            <div class="value-container">
              <div class="value">{{ item.value }}</div>
              <div class="value-label">{{ item.label }}</div>
            </div>
            <div class="icon-wrapper">
              <div class="hexagon-container">
                <div class="hexagon"></div>
                <div class="hexagon-glow"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <EchartsUI
      v-show="!flag"
      ref="chartRef"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
@keyframes scanning {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

:deep(.custom-select) {
  .ant-select-selector {
    background: linear-gradient(
      135deg,
      rgba(32, 187, 252, 0.1),
      rgba(32, 187, 252, 0.05)
    ) !important;
    border: 1px solid rgba(32, 187, 252, 0.3) !important;
    box-shadow: 0 0 15px rgba(32, 187, 252, 0.2) !important;
    backdrop-filter: blur(8px);
  }

  .ant-select-selection-placeholder,
  .ant-select-selection-item {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
  }

  .ant-select-arrow {
    color: rgba(32, 187, 252, 0.9) !important;
    text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
  }

  &:hover .ant-select-selector {
    border-color: rgba(32, 187, 252, 0.5) !important;
    box-shadow: 0 0 20px rgba(32, 187, 252, 0.3) !important;
    background: linear-gradient(
      135deg,
      rgba(32, 187, 252, 0.15),
      rgba(32, 187, 252, 0.1)
    ) !important;
  }

  &.ant-select-focused .ant-select-selector {
    border-color: rgba(32, 187, 252, 0.7) !important;
    box-shadow: 0 0 25px rgba(32, 187, 252, 0.4) !important;
  }
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 22px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(0, 30, 60, 0.7),
    rgba(0, 20, 40, 0.9)
  );
  border: 1px solid rgba(0, 200, 255, 0.4);
  box-shadow:
    0 0 15px rgba(0, 200, 255, 0.4),
    inset 0 0 8px rgba(0, 150, 255, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  text-shadow: 0 0 8px rgba(0, 220, 255, 0.8);
  color: rgba(220, 240, 255, 0.9);
  font-weight: 500;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 200, 255, 0.1),
      transparent
    );
    transform: translateX(-100%);
    animation: scanning 3s infinite;
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    background-color: rgba(0, 220, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(0, 220, 255, 0.6);
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
  }

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(0, 40, 80, 0.8),
      rgba(0, 30, 60, 1)
    );
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow:
      0 0 25px rgba(0, 220, 255, 0.5),
      inset 0 0 12px rgba(0, 180, 255, 0.3);
    text-shadow: 0 0 12px rgba(0, 220, 255, 1);
    transform: translateY(-2px);
  }

  &:active {
    transform: scale(0.96) translateY(0);
    box-shadow:
      0 0 30px rgba(0, 220, 255, 0.6),
      inset 0 0 15px rgba(0, 180, 255, 0.4);
  }

  // 开关状态样式差异
  &:not(:hover)::after {
    animation: pulse 2s infinite;
  }

  // 开启状态特殊样式
  &.active {
    background: linear-gradient(
      135deg,
      rgba(0, 60, 100, 0.8),
      rgba(0, 40, 80, 1)
    );
    border-color: rgba(0, 255, 220, 0.6);
    box-shadow:
      0 0 20px rgba(0, 255, 220, 0.5),
      inset 0 0 10px rgba(0, 255, 200, 0.3);

    &::after {
      left: auto;
      right: 10px;
      background-color: rgba(0, 255, 220, 0.8);
      box-shadow: 0 0 10px 2px rgba(0, 255, 220, 0.6);
    }
  }
}

.box-bg {
  padding: 20px;
  height: calc(100% - 40px);
}

.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}

.data-card {
  background: rgba(16, 20, 38, 0.9);
  border: 2px solid #00a8ff;
  border-radius: 12px;
  padding: 20px 20px 30px 20px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
  min-height: 180px;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 30px rgba(0, 168, 255, 0.4);
    border-color: #00ffff;

    .hexagon {
      transform: scale(1.1) rotate(30deg);
    }

    .value {
      text-shadow: 0 0 15px rgba(0, 168, 255, 0.8);
    }
  }

  .value-container {
    text-align: center;
    width: 100%;
    z-index: 1;
  }

  .value {
    font-size: 40px;
    font-weight: bold;
    background: linear-gradient(45deg, #00a8ff, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    transition: text-shadow 0.3s ease;
  }

  .value-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 4px;
  }

  .icon-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .hexagon-container {
    position: relative;
    width: 60px;
    height: 60px;
  }

  .hexagon {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00a8ff, #00ffff);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.4s ease;
    position: relative;
    z-index: 1;
  }

  .hexagon-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00a8ff, #00ffff);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: blur(10px);
    opacity: 0.5;
    z-index: 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.1) rotate(30deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
</style>
